<template>
  <div>
    <el-dialog
        title=""
        :visible.sync="dialogVisible"
        width="40%"
        center>
        <div>
          <div style="display: flex;justify-content: space-between;
          margin-bottom: 20px;border-bottom: 2px solid #ccc;padding-bottom: 10px;"
          >
            <span >{{qufenbianji?'编辑网关':'新增网关'}}</span>
            <span @click="guanbi"><i class="el-icon-close"></i></span>
          </div>
          <div>
            <el-form :model="form" :rules="rules"  :label-position="labelPosition" ref="ruleform">
                <el-col :span="12">
                <el-form-item label="设备名称" prop="deviceName">
                  <el-input v-model="form.deviceName" size="small" ></el-input>
                </el-form-item>
              </el-col>
                 <el-col :span="12">
                <el-form-item label="所属企业" prop="companyNo">
                  <el-select v-model="form.companyNo"  size="small" style="width: 180px;" :disabled="true">
                    <el-option v-for="(item,index) in qiyelist" :key="index" :label="item.orgName" :value="item.companyNo" class="dengji"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
                <el-col :span="12">
                <el-form-item label="网关地址" prop="deviceTag">
                  <el-input v-model="form.deviceTag" size="small" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="采集通道" prop="channelTag">
                  <el-select v-model="form.channelTag"  size="small" style="width: 180px;" @change="changs" :disabled="isshow">
                    <el-option v-for="(item,index) in tongdaolist" :key="index" :label="item.text" :value="item.value" class="dengji"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否启用" prop="enabled">
                  <el-switch  active-color="#13ce66" v-model="form.enabled" :disabled="isshow"></el-switch>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="12">
                <el-form-item label="" prop="deviceModel"> -->
                  <!-- <el-select v-model="form.deviceModel"  size="small" style="width: 180px;" @change="changedizhi" :disabled="isshow">
                    <el-option v-for="(item,index) in wanguanlist" :key="index" :label="item.typeName" :value="item.channelTag" class="dengji"></el-option>

                  </el-select> -->
                <!-- </el-form-item>
              </el-col> -->
            </el-form>
          </div>                               
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submit" size="small">保存</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
import {getleftlistapi,gettongdaoxialaapi,getwangguanapi,postwangguanapi,putwulianapi} from '@/api/iot'
export default {
  name: 'CallPoliceWangguan',
  props: {
    biaojiobj: {
      type:Object
    },
    qufenbianji: {
      type:String
    },
    companyNo: {
      type:String
    },
    fuzhinewupobj: {
      type:Object
    }
  },
  data() {
    return {
      dialogVisible: false,
      form: {deviceModel:' ',enabled:true},
      labelPosition:'right',
      tongdaolist: [],
      qiyelist: [],
      wanguanlist:[],
      rules: {
        deviceName: [
            { required: true, message: '设备名称必填', trigger: 'blur' }
        ],
        companyNo: [
            { required: true, message: '所属企业必选', trigger: 'blur' }
        ],
        deviceTag: [
            { required: true, message: '网关地址必填', trigger: 'blur' }
        ],
        channelTag: [
            { required: true, message: '采集通道必选', trigger: 'blur' }
        ],
        enabled: [
        { required: true, message: '是否启用必选', trigger: 'blur' }
        ]
      },
      isshow:false
    };
  },
  created() {
  // this.$set(this.form,'enabled',true)
},
  async mounted() {
    // this.$nextTick(this.form,'enabled',true)
    const res = await getleftlistapi()
     this.qiyelist=res.data.list
    const ress = await gettongdaoxialaapi({type:'Gateway'})
    this.tongdaolist=ress.data.list
  },

  methods: {
    async changs(val) {
      console.log(val);
      const res = await getwangguanapi({ channelTag: val })
      this.wanguanlist = res.data.list
      console.log(this.wanguanlist);
    },
    async submit() {
      await this.$refs.ruleform.validate()
      if (this.qufenbianji) {
        const deviceName = encodeURIComponent(this.form.deviceName)
        const deviceTag = encodeURIComponent(this.form.deviceTag)
        await putwulianapi({ct:this.form.ct,pt:this.form.pt,deviceId:this.form.deviceId,deviceName:deviceName,deviceTag})
      } else {
        const deviceNames = encodeURIComponent(this.form.deviceName)
        const { deviceName,deviceTag, ...obj } = this.form
        const deviceTags = encodeURIComponent(this.form.deviceTag)
        await postwangguanapi({...obj,deviceName:deviceNames,deviceTag:deviceTags})
      }
      this.$emit('shuaxin')
      this.guanbi()
    },
    changedizhi(val) {
      console.log(val, 55);
    },
    guanbi() {
      this.dialogVisible = false
      this.$emit('bianji');
      this.isshow = false
      this.$emit('fuzhi')
      this.$refs.ruleform.resetFields()
    }
  },
  watch: {
    immediate: true,
    dialogVisible(val) {
      if (val) {
        if (this.qufenbianji !== '') {
        this.form = this.biaojiobj
        this.isshow = true
        } else {
          if (this.fuzhinewupobj.deviceId) {
            this.form = {...this.fuzhinewupobj }
            this.form.enabled = true
          } else {
            this.form = {}
            this.$set(this.form,'enabled',true)
          }
        this.form.companyNo=this.qiyelist.filter(ele=>ele.companyNo==this.companyNo)[0].companyNo
      }
      }
    },
  }
};
</script>

<style lang="scss" scoped>
 ::v-deep .el-dialog__header{
  display: none;
}
::v-deep .el-input--small{
  display: inline-block;
}
::v-deep .el-form-item__content{
  display: inline-block;
}
</style>